<template>
  <div class="app-container">
    <!-- 条件栏 -->
    <PageFilter v-model:query="filterInfo.query" :filter-list="filterInfo.list">
      <template v-slot:filter-delete>
        <el-button :disabled="!canDelete" @click="batchDelete()"
          >删除</el-button
        >
      </template>
    </PageFilter>
    <!-- 表格 -->
    <TableContainer
      ref="interfaceTable"
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="getInvokeInterface"
      :tab-index="tableInfo.tabIndex"
      :field-list="tableInfo.fieldList"
      :handle="tableInfo.handle"
      v-model:query="filterInfo.query"
      @handleEvent="handleEvent"
    ></TableContainer>
    <!-- 新增修改弹窗 -->
    <PageDialog
      v-if="dialogInfo.visible"
      :title="dialogInfo.title[dialogInfo.type]"
      :className="dialogInfo.className"
      v-model:visible="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <!-- form -->
      <PageForm
        class="paddingBox order-model-formBox flex_wrap_start_start"
        v-model:ref-obj="formInfo.ref"
        :data="formInfo.data"
        :field-list="formInfo.fieldList"
        :rules="formInfo.rules"
        :label-width="formInfo.labelWidth"
        :list-type-info="listTypeInfo"
      >
        <template v-slot:form-thirdSystemId>
          <el-input
            v-model="formInfo.data.clientName"
            type="input"
            :disabled="true"
            class="not-mongolia"
            placeholder="请选择对接系统"
          >
            <template #append>
              <el-icon @click="openSystemList"><MoreFilled /></el-icon>
            </template>
          </el-input> </template
      ></PageForm>
    </PageDialog>
    <select-system
      v-if="selectUserInfo.visible"
      v-model:showDialog="selectUserInfo.visible"
      v-model:query="selectUserInfo.query"
      :api="getThirdSystem"
      :saveEmpty="true"
      :check-box="false"
      :highlight-row="true"
      @callback="selectUserCallBack"
    />
  </div>
</template>

<script setup name="invokeInterface">
import SelectSystem from './selectSystem'
import {
  getInvokeInterface,
  createInvokeInterface,
  putInvokeInterface,
  deleteInvokeInterface,
  getThirdSystem,
  getThirdSystemAll,
  deleteInvokeInterfaceBatch,
} from '@/api/base.js'

const { proxy } = getCurrentInstance()
// 过滤相关配置
const filterInfo = ref({
  query: {
    sort: 'create_time desc',
  },
  list: [
    {
      type: 'button',
      label: '新增',
      event: showCreate,
      show: proxy.$permission('invokeInterface:add'),
    },
    {
      type: 'slot',
      label: '删除',
      value: 'delete',
      show: proxy.$permission('invokeInterface:del'),
    },
    {
      type: 'input',
      label: '接口名称',
      value: 'nameLike',
      event: search,
    },
    {
      label: '客户端名称',
      value: 'thirdSystemId',
      type: 'slip-select',
      api: getThirdSystemAll,
      query: { sort: 'create_time desc' },
      clearable: true,
      keyField: 'name',
      valueField: 'id',
      event: search,
    },
    { type: 'button', label: '搜索', event: search },
  ],
})
// 接口表格相关
const tableInfo = ref({
  selections: [],
  refresh: 1,
  initCurpage: 1,
  api: undefined,
  data: [],
  loadData: false,
  fieldList: [
    { label: '接口名称', value: 'name', required: true },
    { label: '客户端名称', value: 'clientName', required: true },
    { label: '接口url', value: 'uri', required: true },
    { label: '接口调用方法', value: 'method', required: true },
    { label: '接口类', value: 'invokeClassname', required: true },
    { label: '接口方法', value: 'invokeMethodName', required: true },
    { label: '接口前处理类', value: 'beforeHandleClass' },
    { label: '接口前处理方法', value: 'beforeHandleMethod' },
    { label: '接口后处理类', value: 'afterHandleClass' },
    { label: '接口后处理方法', value: 'afterHandleMethod' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '50',
    btList: [
      {
        label: '修改',
        event: showUpdate,
        show: proxy.$permission('invokeInterface:update'),
      },
      // {
      //   label: "删除",
      //   event: batchDelete,
      //   show: proxy.$permission("invokeInterface:del"),
      //   popconfirmText: "删除后将改变数据,是否继续？"
      // }
    ],
  },
})
// 字典表单相关
// 表单相关
const formInfo = ref({
  ref: null,
  data: {},
  fieldList: [
    {
      label: '接口描述',
      value: 'name',
      type: 'input',
      required: true,
    },
    {
      label: '客户端',
      value: 'thirdSystemId',
      type: 'slot',
      disabled: false,
      required: true,
    },
    {
      label: '接口url',
      value: 'uri',
      type: 'input',
      required: true,
      maxlength: 200,
    },
    {
      label: '接口调用方法',
      value: 'method',
      type: 'select-model',
      code: 'request_method',
      required: true,
    },
    {
      label: '接口类',
      value: 'invokeClassname',
      type: 'input',
      required: true,
    },
    {
      label: '接口方法',
      value: 'invokeMethodName',
      type: 'input',
      required: true,
    },
    {
      label: '接口前处理类',
      value: 'beforeHandleClass',
      type: 'input',
    },
    {
      label: '接口前处理方法',
      value: 'beforeHandleMethod',
      type: 'input',
    },
    {
      label: '接口后处理类',
      value: 'afterHandleClass',
      type: 'input',
    },
    {
      label: '接口后处理方法',
      value: 'afterHandleMethod',
      type: 'input',
    },
  ],
  rules: {},
  labelWidth: '140px',
})
// 字典弹窗相关
const dialogInfo = ref({
  title: {
    create: '新增',
    update: '修改',
  },
  visible: false,
  className: 'interface-config',
  type: '',
  data: {},
  btLoading: false,
  btList: [
    { label: '关闭', event: close, show: true },
    {
      label: '保存',
      type: 'primary',
      event: save,
      saveLoading: false,
      show: true,
    },
  ],
})
const listTypeInfo = ref({
  enableList: [
    {
      key: '是',
      value: 1,
    },
    {
      key: '否',
      value: 0,
    },
  ],
})
const selectUserInfo = ref({
  visible: false,
  saveEmpty: true,
  query: {
    type: 'normal',
  },
})
const canDelete = computed(() => {
  return tableInfo.value.selections.length > 0
})
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = data
      break
  }
}
function getIds(row) {
  if (row) {
    return [row.id]
  } else {
    return tableInfo.value.selections.map((value) => value.id)
  }
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
// 初始化验证
function initRules() {
  formInfo.value.rules = proxy.$initRules(formInfo.value.fieldList)
}
function showCreate() {
  dialogInfo.value.type = 'create'
  formInfo.value.data = {}
  dialogInfo.value.visible = true
}
function close() {
  //关闭字典弹窗
  dialogInfo.value.visible = false
  formInfo.value.data = {}
}
function showUpdate(data) {
  formInfo.value.type = 'update'
  formInfo.value.data = { ...data }
  dialogInfo.value.visible = true
}
function save() {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      const params = formInfo.value.data
      const api = params.id ? putInvokeInterface : createInvokeInterface
      api(params).then((res) => {
        if (res && res.success) {
          dialogInfo.value.visible = false
          tableInfo.value.refresh = Math.random()
          formInfo.value.data = {}
        }
      })
    }
  })
}
function batchDelete(row) {
  const ids = getIds(row)
  if (ids.length === 0) {
    proxy.$message({
      message: `请选择`,
      type: 'warning',
      duration: 3500,
      showClose: true,
    })
  }
  deleteInvokeInterfaceBatch(ids).then((res) => {
    if (res && res.success) {
      tableInfo.value.refresh = Math.random()
    }
  })
}
function openSystemList() {
  selectUserInfo.value.visible = true
}
function selectUserCallBack(row) {
  formInfo.value.data['thirdSystemId'] = row.id
  formInfo.value.data['clientName'] = row.name
}
onMounted(() => {
  getList()
  initRules()
})
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.interface-config .el-dialog__body {
  display: flex;
}
</style>
